<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站设置 - 个人博客</title>
    <!-- Turbo: ensure SPA-style navigation and consistent event lifecycle -->
    <meta name="turbo-cache-control" content="no-cache">
    <script defer src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/dist/turbo.es2017-umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        .container {
            max-width: 1200px;
        }

        /* navbar override removed; use global fragment styles */

        .card {
            background-color: #1e1e1e;
            border: 1px solid rgba(102, 178, 255, 0.1);
            border-radius: 10px;
        }

        .card-header {
            background-color: rgba(102, 178, 255, 0.1);
            border-bottom: 1px solid rgba(102, 178, 255, 0.1);
            color: #66b2ff;
            font-weight: bold;
        }

        .btn-primary {
            background-color: #66b2ff;
            border-color: #66b2ff;
        }

        .form-control {
            background-color: #2d2d2d;
            border: 1px solid #444;
            color: #e0e0e0;
        }

        .form-control:focus {
            background-color: #333;
            border-color: #66b2ff;
            box-shadow: 0 0 0 0.25rem rgba(102, 178, 255, 0.25);
        }

        .preview-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/navbar :: navbar}"></div>

<div class="container">
    <div class="alert alert-success alert-dismissible fade show" th:if="${message}" role="alert">
        <i class="bi bi-check-circle-fill"></i> <span th:text="${message}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" th:if="${error}" role="alert">
        <i class="bi bi-exclamation-triangle-fill"></i> <span th:text="${error}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-sliders"></i> 网站设置</h1>
        <div>
            <a href="/admin" class="btn btn-outline-primary"><i class="bi bi-arrow-left"></i> 返回管理面板</a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <i class="bi bi-image"></i> 首页背景图片
        </div>
        <div class="card-body">
            <form th:action="@{/admin/settings/save}" method="post" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="backgroundImageFile" class="form-label">上传新背景图片</label>
                    <input type="file" class="form-control" id="backgroundImageFile" name="backgroundImageFile"
                           accept="image/*">
                    <div class="form-text text-muted">如果不上传新图片，将保留现有背景。建议使用高清大图。</div>
                    <input type="hidden" name="currentImageUrl" th:value="${backgroundImage}">
                </div>

                <div class="mb-3" id="background-preview-container">
                    <label class="form-label">当前背景预览</label>
                    <div th:if="${backgroundImage != null and !backgroundImage.isEmpty()}">
                        <img th:src="${backgroundImage}" class="preview-image" alt="背景图片预览">
                    </div>
                    <div th:if="${backgroundImage == null or backgroundImage.isEmpty()}" class="text-muted">
                        <p>暂无背景图片</p>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> 保存设置
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap 组件初始化已由 turbo-fixes.js 统一管理 -->
</body>
</html>